<%@page import="calendar.CalendarVo"%>
<%@page import="calendar.CalendarMyba"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/FullCalendar/jquery.ui.datepicker-ko.js"></script>
<title>Insert title here</title>
<style type="text/css">
#cl{
	text-align: center;
	margin-bottom: 30px;
}
#cl-top{
	text-align: right;
	width: 92%;
	margin-bottom: 15px;
}
#cl-table{
	display: table;
    margin:0 auto; 
    width: 1000px;
}
.cl-header{
	display: table-row;
	background-color: #eeeeee;
}
.cl-header p{
	display: table-cell;
 	border: 1px solid gray;
 	border-top: 3px solid gray;
 	padding: 3px;
 	text-align: center;
	height: 33px;
	vertical-align: middle;
	font-weight: bold;
}
.cl-header p:FIRST-CHILD{ border-left: 3px solid gray; }
.cl-header p:LAST-CHILD{ border-right: 3px solid gray; }
.cl-body{
	display: table-row;
}
.cl-body p{
	display: table-cell;
 	border: 1px solid gray;
 	padding: 3px;
 	height: 30px;
	vertical-align: middle;
}
.cl-body:LAST-CHILD p{
	border-bottom: 3px solid gray;
}
#cl-body-title{
	text-align: left;
	padding-left: 15px;
}
#cl-bottom{
	text-align: right;
	padding: 10px;
	padding-right: 10%;
}
</style>

<script type="text/javascript">
	function fnCalWrite() {
		//location.href='${pageContext.request.contextPath}/homepage/index.jsp?inc_content=./calendar/calendar_write.jsp';
		location.href='${pageContext.request.contextPath}/CalInsertForm.cal';
	}
	
	function fnChange() {
		var name = document.getElementById("cal_search_name");
		var title = document.getElementById("cal_search_title");
		var date = document.getElementById("cal_search_date");
		
		title.value = "";
		date.value = "";
		if(name.selectedIndex == 0 || name.selectedIndex == 1){
			date.style.display = "none";
			title.style.display = "";
		}else if(name.selectedIndex == 2){
			//title.readOnly = "readOnly";
			date.style.display = "";
			title.style.display = "none";
			$("#cal_search_date").datepicker({
				buttonImageOnly: true, //이미지만 보이기
				changeMonth: true,
				changeYear: true,
				autoSize: true
			});
			$("#cal_search_date").datepicker("option", "yy-mm-dd", "2013:2020");
			$("#cal_search_date").css("width","150px");
		}
	}
</script>
</head>
<body>
	<%
		CalendarMyba sql = new CalendarMyba();
		List<CalendarVo> lists =  sql.select();
	%>
	<c:set var="lists" value="<%=lists %>"></c:set>
	<div id="cl">
		<h1>사내 일정 관리</h1>
		<div id="cl-top">
			<input type="button" value="일정 등록" onclick="fnCalWrite()">
		</div>		
		<div id="cl-table">
			<div class="cl-header">
				<p style="width: 15%;">시작일</p>
				<p style="width: 15%">마지막일</p>
				<p style="width: 30%">일정명</p>
				<p style="width: 10%">글씨색</p>
				<p style="width: 10%">배경색</p>
				<p style="width: 7%;">삭제</p>
				<p style="width: 11%;">등록일</p>
			</div>
			<c:choose>
				<c:when test="${empty lists }">
			<div class="cl-body">
				<p>입력된 데이타가 없습니다</p>
			</div>
				</c:when>
				<c:otherwise>
					<c:forEach items="${lists }" var="list" varStatus="loop">
			<div class="cl-body">
				<p style="width: 15%; border-left: 3px solid gray;">${fn:substring(list.cal_startdt,0,10) }</p>
				<p style="width: 15%">${fn:substring(list.cal_enddt,0,10) }</p>
				<p id="cl-body-title" style="width: 30%"><a href="${pageContext.request.contextPath}/homepage/index.jsp?inc_content=./calendar/calendar_edit.jsp?cal_no=${list.cal_no}">${list.cal_title }</a></p>
				<p style="width: 10%">${list.cal_font_color }</p>
				<p style="width: 10%">${list.cal_back_color }</p>
				<p style="width: 7%; border-right: 3px solid gray;">
					<input type="button" value="삭제" onclick="location.href='${pageContext.request.contextPath}/homepage/index.jsp?inc_content=./calendar/calendar_delete.jsp?cal_no=${list.cal_no}'">
				</p>
				<p style="width: 11%">${fn:substring(list.rg_dt,0,10) }</p>
			</div>
					</c:forEach>
				</c:otherwise>
			</c:choose>
		</div>
		<div id="cl-bottom">
			<select name="cal_search_name" id="cal_search_name" onchange="fnChange()">
				<option value="">조회 조건</option>
				<option value="cal_title">일정 명</option>
				<option value="cal_date">일정 기간</option>
			</select>
			<input type="text" name="cal_search_title" id="cal_search_title" style="width: 150px">
			<input type="text" name="cal_search_date" id="cal_search_date" style="width: 150px; display: none;" readonly="readonly">
			<input type="button" value="조회">
		</div>
	</div>
	<div>
		
	</div>
</body>
</html>